<template>
    <div class="classxx">
        <van-nav-bar title="分类" fixed placeholder left-arrow left-text="返回" @click-left="$goBack" />
        <div v-if="classData" class="main-box">
            <div class="left-list">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item 
                        v-for="(item, index) in classData" 
                        :key="index" 
                        :title="item.goodsName || '加载中...'" />
                </van-sidebar>
            </div>
            <div class="right-box">
                <div v-if="classData[activeKey]">
                    <div v-for="(item1, index1) in classData[activeKey].secondLevelCategoryVOS || []" :key="index1">
                        <h3>{{ item1.goodsName || '加载中...' }} </h3>
                        <div class="nav1">
                            <van-grid :column-num="3">
                                <van-grid-item 
                                    v-for="(item2, index2) in item1.thirdLevelCategoryVOS || []" 
                                    :key="index2">
                                    <router-link 
                                        :to="{ name: 'infom', params: { goodsId: String(item2.goodsId) } }">
                                        <van-image :src="item2.goodsCoverImg || 'placeholder.png'" />
                                        <span>{{ item2.goodsName || '商品名称加载中...' }}</span>
                                    </router-link>
                                </van-grid-item>
                            </van-grid>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <p>暂无分类数据</p>
                </div>
            </div>
        </div>
        <div v-else>
            <p>分类数据加载中...</p>
        </div>
        <!-- 导航栏 -->
        <BottomTabBar />
    </div>
</template>

<script>
import BottomTabBar from '@/components/BottomTabBar.vue';

export default {
    components: {
    BottomTabBar,
  },
    data() {
        return {
            classData: null,
            active: 0,
            activeKey: 0
        };
    },
    created() {
        this.$axios.get("../assets/category.json")
            .then(response => {
                this.classData = response.data?.data || [];
            })
            .catch(err => {
                console.error('加载分类数据失败', err);
            });
    }
};
</script>


<style lang="less">
.nav1 {
    img {
        width: 50px;
        height: 50px;
    }

    span {
        padding-top: 5px;
        font-size: 12px;
    }
}

.classxx {
    width: 100vw;
    overflow: hidden;
}

.van-sidebar {
    width: 35%;
    position: fixed;
}

.main-box {
    display: flex;
    height: 100vh;
    overflow-y: auto;

    .left-list {
        width: 35%;
        height: 100%;
        overflow: hidden;
    }

    .right-box {
        width: 65%;
        overflow-y: auto;
        height: 100%;
    }
}

a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
</style>
